<template>
	<div class="personal_information">
		<div class="personal_information_title">
			<van-icon name="arrow-left" color="white" size="22px" style="position: absolute;left: 5px;" @click="back" />
			<p>个人信息</p>
		</div>
		<div class="personal_avtor">
			<van-uploader v-model="fileList" multiple :max-count="1" upload-text="点击修改头像" :after-read="afterRead" />

		</div>
		<div class="personal_details">
			<van-form @submit="onSubmit">
				 <van-field label="账号" v-model="user_info.account" readonly />
					 <van-field v-model="user_info.nickname" name="昵称" label="昵称" 
					 	 />
				<van-field name="radio" label="性别">
					<template #input>
						<van-radio-group v-model="user_info.gender" direction="horizontal">
							<van-radio name="男">男</van-radio>
							<van-radio name="女">女</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<!-- 日历 -->
				<van-field readonly clickable name="calendar" v-model="user_info.birthday" label="生日" placeholder="点击选择日期"  
					@click="showCalendar = true" />
				<van-calendar v-model="showCalendar" @confirm="onConfirmDate" :min-date="minDate" :max-date="maxDate"/>
				<!-- 城市 -->
				<van-field readonly clickable name="picker" v-model="user_info.fullLocation" label="城市" placeholder="点击选择城市"
					@click="showPicker = true" />
				<van-popup v-model="showPicker" position="bottom">
					<van-picker show-toolbar :columns="columns" @confirm="onConfirmCity" @cancel="showPicker = false" />
				</van-popup>
				<van-field  name="职业" label="职业" placeholder="请填写职业"
					v-model="user_info.profession" />
				
				
			</van-form>
		</div>
		<div class="personal_save_button">
			<button @click="onSubmit">保存</button>
		</div>
	</div>
</template>

<script>
	import request from '../../api/request.js'
	export default {
		name: "personal_information",
		data() {
			return {
				user_info:{},
				
				fileList: [

					     { url: '' }

				],
			
				username: '',
				occupation:'',
				// 性别
				 radio: '1',
				
				
				showCalendar: false,
				 minDate: new Date(2023, 0, 1),
				      maxDate: new Date(2024, 0, 1),
				// 城市
				
				 columns: [
				        {
				          text: '浙江',
				          children: [
				            {
				              text: '杭州',
				              children: [{ text: '西湖区' }, { text: '余杭区' }],
				            },
				            {
				              text: '温州',
				              children: [{ text: '鹿城区' }, { text: '瓯海区' }],
				            },
				          ],
				        },
				        {
				          text: '福建',
				          children: [
				            {
				              text: '福州',
				              children: [{ text: '鼓楼区' }, { text: '台江区' }],
				            },
				            {
				              text: '厦门',
				              children: [{ text: '思明区' }, { text: '海沧区' }],
				            },
				          ],
				        },
				      ],
				showPicker: false,

			};
		},
	async	mounted() {
		// 拿到个人信息
			await	this.$store.dispatch('userStore/get_user_info',localStorage.getItem('token'))
			this.user_info=this.$store.state.userStore.user_info
			this.fileList[0].url=this.user_info.avatar
		
		},
		methods: {
  afterRead(file) {
      // 此时可以自行将文件上传至服务器
	  this.user_info.avatar=file.file
      console.log(file.file);
    },
			back() {
				this.$router.back()
			},
			// 生日
			onConfirmDate(date) {
				this.user_info.birthday = `${date.getMonth() + 1}/${date.getDate()}`;
				this.showCalendar = false;
			},
			// 城市
			onConfirmCity(value) {
				this.user_info.fullLocation = value;
				this.showPicker = false;
			},
		async	onSubmit() {
			let new_user_info={
				"nickname":this.user_info.nickname,
				"gender":this.user_info.gender,
				"birthday":this.user_info.birthday,
				"profession":this.user_info.profession
			}
			console.log('new_user_info',JSON.stringify(new_user_info))
			
				let res=await request({
					url:'/member/profile',
					method:'put',
					headers:{
						Authorization:localStorage.getItem('token'),
						"Content-Type":"application/json"
					
						
					},
				data:{
					
						nickname:this.user_info.nickname,
						gender:this.user_info.gender,
						birthday:this.user_info.birthday,
						profession:this.user_info.profession
					
				},
					
				})
				console.log("res.result",res.result)
				this.user_info=res.result
				
				// 修改头像
			
				// let res=await request({
				// 	url:'/member/profile/avatar',
				// 	method:'post',
				// 	headers:{
				// 		Authorization:localStorage.getItem('token')
						
				// 	},
				// 	data:{
				// 		body:{
						
				// 	},
				// 	},
					
				// })
				console.log(res)
				
			}

		
	 }
	}
</script>

<style lang="scss">
	.personal_information {
		width: 100%;
		height: 100%;

		.personal_information_title {
			width: 100%;
			height: 6%;
			background-color: #5CC9AA;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;

			p {
				font-size: 30px;

			}
		}

		.personal_avtor {
			width: 100%;
			height: 14%;
			background-color: #5CC9AA;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

		}

		.personal_details {
			width: 100%;
			height: 38%;
			
		}

		.personal_save_button {
			width: 100%;
			height: 6%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30px;

			button {
				width: 90%;
				height: 90%;
				background-color: #5AB79C;
				border-radius: 80px;
				border: none;
				color: white;
				font-size: 32px;
			}
		}

	}
</style>